@import '@/style/variables.less';

.container {
  box-sizing: border-box;
  height: @playlistmodal-height;
  width: @playlistmodal-width;
  background-color: @playlistmodal-bgcolor;
  box-shadow: -10px 0 10px #99999930;
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1001;
  .head {
    padding: @playlistmodal-padding;
    .title {
      font-size: 22px;
      margin: 10px 0;
    }
    .bottom {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      .songNum {
      }
      .botton {
        display: flex;
        flex-direction: row;
        & > div {
          font-size: 14px;
        }
      }
    }
  }
  .content {
    overflow: auto;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      border-bottom: 1px solid #f7f7f7;
      transition: background-color 300ms;
      user-select: none;
      &:hover {
        background-color: #f2f2f2;
      }
      &.active {
        position: relative;
        color: @green;
        &:after {
          content: '';
          display: block;
          width: 3px;
          height: 70px;
          position: absolute;
          background-color: @green;
          left: 0;
        }
      }
      & > div {
        display: flex;
        flex-direction: row;
        & > img {
          width: 50px;
          height: 50px;
        }
        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10px;
          & > div {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .time {
      }
    }
    // 滚动条
    &::-webkit-scrollbar-track {
      display: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }

    &::-webkit-scrollbar-thumb {
      display: none;
    }
  }
}
